import { defineStore } from "pinia";
import { ref } from "vue";
import { useStore } from "@/store/index.js";

const store = useStore();

// 公用部分
const comment = ref({
  method: {
    // 全局取消事件冒泡
    globalOffParentDefault: (event) => {
      event.preventDefault();
    },
    initAllStatus: () => {
      content.value.method.reset();
      search.value.method.reset();
      setting.value.method.reset();
      collect.value.method.reset();
      userInfo.value.method.reset();
    },

    // 新全局鼠标左键事件
    globalClick1Event: () => {
      // 校验用户信息组件是否置顶，置顶则无操作
      if (userInfo.value.top) {
        return;
      }

      // 校验搜索组件是否置顶，置顶则执行搜索组件相关操作
      if (search.value.top) {
        // 校验搜索源切换列表是否打开，打开则关闭该列表
        if (search.value.source) {
          search.value.method.cancelSourceListDisplay();
          return;
        }

        // 校验联想词列表是否打开，打开则关闭该列表
        if (search.value.suggestHeight > 0) {
          search.value.suggestHeight = 0;  // 联想词列表高度置为0
          return;
        }

        // 搜索组件取消置顶
        search.value.method.cancelTop();
        return;
      }

      // 校验收藏组件是否置顶，置顶则执行收藏组件相关操作
      if (collect.value.top) {
        // 校验收藏项操作组件是否置顶，置顶则无操作
        if (collect.value.operationAlertTop) {
          return;
        }

        // 收藏组件取消置顶
        collect.value.method.cancelTop();
      }
    },

    // 新全局鼠标右键事件
    globalClick2Event: () => {
      // 校验搜索组件是否置顶，置顶则无操作
      if (search.value.top) {
        return;
      }

      // 校验收藏组件是否置顶，未置顶则进入收藏二级页面
      if (!collect.value.top) {
        collect.value.method.displayTop();
      }
    },

    // 全局鼠标右键事件
    globalRightEvent: () => {
      // 判断用户详情信息弹窗是否置顶显示，如果显示则不进行任何操作
      if (userInfo.value.top) {
        console.log(`用户详情信息弹窗已打开 - 本次右键无操作 - userInfo.value.top`);
        return;
      }

      // 判断搜索组件是否顶置显示，顶置显示时，本次操作取消顶置显示
      if (search.value.top) {
        console.log(`搜索组件已顶置显示 - 本次右键会根据搜索组件中的多个模块状态进行不同的操作 - search.value.top`);
        console.log('可能进行的操作 =》 关闭关联词列表 - 关闭搜索源列表 - 取消顶置');
        search.value.method.cancelTop();
        return;
      }

      // 判断收藏列表是否顶置，顶置显示时，本次操作取消顶置显示
      if (collect.value.top) {
        console.log(`收藏列表已顶置显示 - 本次右键会根据搜列表中的多个模块状态进行不同的操作 - collection.value.top`);
        console.log('可能进行的操作 =》 关闭收藏项编辑新增组件 - 取消顶置');
        collect.value.method.cancelTop();
        return;
      }

      console.log('收藏列表顶置显示');
      collect.value.method.displayTop();
    }
  }
})

// 最外层效果盒子动态样式控制变量
const content = ref({
  trigger: false, // 触发背景模糊放大
  method: {
    // 重置状态
    reset: () => {
      content.value.trigger = false;
    },
    // 清除 模糊 + 放大 效果
    clearBlurBig: () => {
      content.value.trigger = false; // 自身效果关闭
      chickenSoup.value.status = 1; // 鸡汤组件显示
      guide.value.status = 1; // 使用帮助组件显示
    },
    // 添加 模糊 + 放大 效果
    addBlurBig: () => {
      content.value.trigger = true;  // 自身效果触发
      chickenSoup.value.status = 2; // 鸡汤组件隐藏
      guide.value.status = 2; // 使用帮助组件隐藏
    },
  }
})

// 时间显示组件动态样式控制变量
const timer = ref({
  display: true,  // true 显示，false 隐藏
})

// 使用帮助组件动态样式控制变量
const guide = ref({
  status: 0, // 使用帮助组件状态，0 初始，1 显示，隐藏
  method: {

    reset: () => {
      guide.value.status = 0;
    }

  }
})

// 鸡汤组件动态样式控制变量
const chickenSoup = ref({
  status: 0, // 使用帮助组件状态，0 初始，1 显示，隐藏
  method: {

    reset: () => {
      chickenSoup.value.status = 0;
    }

  }
})

// 搜索组件动态样式控制变量
const search = ref({
  top: false, // 置顶搜索框
  hover: false, // 鼠标悬浮搜索框
  focus: false, // 搜索输入框获取焦点
  source: false, // 搜算源切换弹窗
  status: 0, // 搜索框状态，0初始化，1显示，2隐藏（替代display）
  suggestHeight: 0, // 联想词列表元素高度
  method: {
    // 重置状态
    reset: () => {
      search.value.top = false;
      search.value.hover = false;
      search.value.focus = false;
      search.value.source = false;
      search.value.status = 0;
      search.value.source = false;
    },
    // 更换 搜索框悬浮状态
    changeHover: () => {
      if (search.value.focus) return;
      search.value.hover = !search.value.hover;
    },
    // 搜索源源选择列表显示
    displaySourceList: () => {
      if (search.value.source) {
        search.value.source = false;
        return;
      }
      search.value.suggestHeight = 0;  // 联想词列表高度置为0
      search.value.source = true;
    },
    // 取消搜索源选择列表显示
    cancelSourceListDisplay: () => {
      search.value.source = false;
    },
    // 设置搜索组件显示定制
    displayTop: () => {
      search.value.top = true;
      search.value.focus = true; // 搜索文本框焦点
      content.value.method.addBlurBig(); // 背景 模糊 and 放大
    },
    // 取消搜索框置顶
    cancelTop: () => {
      if (search.value.source) {
        search.value.source = false;  // 搜索源弹窗
        return;
      }
      if (search.value.suggestHeight) {
        search.value.suggestHeight = 0;  // 联想词列表高度置为0
        return;
      }
      search.value.top = false; // 置顶
      search.value.hover = false; // 悬浮
      search.value.focus = false; // 焦点
      content.value.method.clearBlurBig(); // 清除 放大模糊 效果
    }
  }
})

// 设置组件动态样式控制变量
const setting = ref({
  userHover: false, // 用户图标悬浮
  settingHover: false, // 设置图标悬浮
  method: {
    reset: () => {
      setting.value.userHover = false;
      setting.value.settingHover = false;
    }
  }
})

// 收藏组件动态样式控制变量 - new
const collect = ref({
  top: false, // 收藏组件置顶

  operationAlertTop: false, // 收藏操作弹窗组件置顶
  operationAlertTitle: '添加收藏项', // 收藏操作弹窗组件标题
  operationAlertLoading1: false, // 收藏操作弹窗组件加载状态1
  operationAlertLoading2: false, // 收藏操作弹窗组件加载状态2
  operationAlertType: 0, // 收藏操作弹窗操作类型，0新增，1删除
  operationAlertTimer: null,
  // 收藏操作弹窗显示位置坐标
  place: {
    x: 0,
    y: 0
  },
  method: {
    reset: () => {
      collect.value.top = false;
      collect.value.operationAlertTop = false;
      collect.value.operationAlertLoading1 = false;
      collect.value.operationAlertLoading2 = false;
    },

    // 收藏组件显示置顶
    displayTop: () => {
      store.collection.method.loadCollectionList(); // 加载收藏组件中收藏列表的数据，避免数据不存在

      search.value.status = 2; // 搜索组件隐藏
      content.value.method.addBlurBig(); // 背景模糊放大
      collect.value.top = true; // 收藏组件置顶
    },

    // 收藏组件取消置顶
    cancelTop: () => {
      // 判断收藏项操作组件是否打开，打开则关闭
      if (collect.value.operationAlertTop) {
        collect.value.method.closeOperationAlert(); // 关闭收藏项操作弹窗组件
        return;
      }

      search.value.status = 1; // 恢复回搜索组件显示
      collect.value.top = false; // 回复收藏组件隐藏
      content.value.method.clearBlurBig(); // 恢复默背景认效果
    },

    // 关闭收藏项操作他弹窗组件
    closeOperationAlert: () => {
      collect.value.operationAlertTop = false; // 取消收藏项操作组件置顶
      store.collect.method.resetData(); // 重置收藏项数据
    },

    // 打开收藏项操作他弹窗组件
    openOperationAlert: (type) => {
      if (type === 0) {
        collect.value.operationAlertTitle = '添加/收藏项';
      }
      if (type === 1) {
        collect.value.operationAlertTitle = '编辑收藏项';
      }
      collect.value.operationAlertType = type;
      collect.value.operationAlertTop = true;  // 收藏项操作组件置顶
    },

    // 计算收藏项弹窗显示位置
    calculatePlace: (x, y, width, height) => {
      const elementWidth = 430;
      const elementHeight = 316;

      if ((width - x) < elementWidth) x = width - elementWidth;

      if ((height - y) < elementHeight) y = height - elementHeight;

      collect.value.place.x = x;
      collect.value.place.y = y;
    },

  }
})

// 用户详情组件动态样式控制变量
const userInfo = ref({
  top: false, // 是否置顶
  method: {
    reset: () => {
      userInfo.value.top = false;
    },
    // 用户详情信息组件显示置顶
    displayTop: () => {
      userInfo.value.top = true; // 置顶状态 TRUE
      search.value.status = 2; // 搜索组件隐藏
      timer.value.display = false; // 时间组件隐藏
      // 背景状态：放大 + 模糊
      content.value.method.addBlurBig();
    },
    cancelTop: () => {
      userInfo.value.top = false; // 置顶状态 FALSE
      search.value.status = 1; // 搜索组件显示
      timer.value.display = true; // 时间组件显示
      // 背景状态：去除额外效果恢复正常
      content.value.method.clearBlurBig();
    },
  }
})

export const useStyleStore = defineStore("styleStore", () => {
  return {
    timer,
    guide,
    comment,
    content,
    search,
    setting,
    collect,
    userInfo,
    chickenSoup
  }
})